<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <div id="mains" style="width: 600px;height: 400px;"></div>

    <script src="../assets/lib/echarts/echarts.min.js"></script>
    <script>
        //直线柱状图
        // 基于准备好的dom，初始化echarts实例  
        const myChart = echarts.init(document.querySelector('#main'));
        // 指定图表的配置项和数据  
        const option = {
            //标题  
            title: {
                text: '手机销量统计'
            },
            //提示框  
            tooltip: {},
            legend: {
                data: ['数量', '机型']
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }, {
                name: '机型',
                type: 'bar',
                data: [10, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);

        //籍贯饼图
        // 基于准备好的dom，初始化echarts实例  
        const myChart1 = echarts.init(document.querySelector('#mains'));
        // 指定图表的配置项和数据  
        const option1 = {
            //标题  
            title: {
                text: '籍贯 Hometown',
                textStyle: {
                    color: '#6d767e'
                }
            },
            //鼠标移入的提示  
            tooltip: {
                //内容格式  
                formatter: `{a}<br/>{b}<strong>{c}</strong>人 占比{d}%`
            },
            series: [{
                //系列名称  
                name: '各地人员分布',
                //图例类型,pie表示饼图  
                type: 'pie',
                //饼图的半径,数组第一个是内半径,第二个是外边距  
                radius: ['10%', '65%'],
                //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。  
                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。  
                center: ['50%', '50%'],
                //是否展示成南丁格尔图  
                //radius圆心角和半径 都区分数据大小  
                //area 圆心角一样,仅通过半径大小区分数据大小  
                roseType: 'area',
                //每一项的样式设置  
                itemStyle: {
                    //每一项的圆角设置  
                    borderRadius: 4
                },
                data: [{
                    value: 40,
                    name: '北京'
                },
                {
                    value: 8,
                    name: '山东'
                },
                {
                    value: 32,
                    name: '上海'
                },
                {
                    value: 30,
                    name: '江苏'
                },
                {
                    value: 28,
                    name: '河北'
                },
                {
                    value: 6,
                    name: '山西'
                },
                {
                    value: 22,
                    name: '河南'
                },
                {
                    value: 8,
                    name: '辽宁'
                }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。  
        myChart1.setOption(option1);


    </script>
</body>

</html>